<template>
  <div class="ly-message-box__wrapper" :style="styleObj" v-if="isVisble">
    <div class="ly-message-box">

      <div class="ly-message-box__header">
        <div class="ly-message-box__title">
          <span>{{title}}</span>
        </div>
        <ly-icon @click.native="onClose" name="close" class="ly-message-box__headerbtn"></ly-icon>
      </div>

      <div class="ly-message-box__content">
        <div class="ly-message-box__container" ref="msgContainer">
          <slot name="content" v-if="message"></slot>
          <p v-else>{{content}}</p>
        </div>
      </div>

      <div class="ly-message-box__btns">
        <yj-button v-if="isCancel" size="mini" @click.native="onCancel">{{cancelButtonText}}</yj-button>
        <yj-button style="marginLeft:6px" type="primary" size="mini" @click.native="onSubmit">{{confirmButtonText}}</yj-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'lyMessageBox',
  props:{
    title:{
      type:String,
      default:'标题'
    },
    content:{
      type:String,
      default:'这是内容'
    },
    confirmButtonText:{
      type:String,
      default:'确定'
    },
    cancelButtonText:{
      type:String,
      default:'取消'
    },
    isCancel:{
      type:Boolean,
      default:false
    },
    dangerouslyUseHTMLString:{
      type:Boolean,
      default:false
    },
    zIndex:{
      type:Number,
    },
    message:{

    }
  },
  watch:{
    message:{
      immediate:true,
      handler(n){
        if(this.dangerouslyUseHTMLString){
          this.$nextTick().then(res => {
            this.$refs.msgContainer.innerHTML = n
          })
        }else{
          this.$slots.content = n
        }
      }
    }
  },
  data() {
    return {
      isVisble:true
    }
  },
  computed:{
    styleObj(){
      return {
        'z-index':this.zIndex,
        // background:this.params.background
      }
    }
  },
  methods:{
    onSubmit(){
      this.res()
    },
    onCancel(){
      this.rej()
    },
    onClose(){
      this.close()
    }
  }
}
</script>
<style lang="scss">
$preFix:'ly-message-box';
.#{$preFix} {
  &__wrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    &::after{
      content: "";
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
    }
    .ly-message-box{
      display: inline-block;
      width: 420px;
      padding-bottom: 10px;
      vertical-align: middle;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      font-size: 18px;
      // box-shadow: 0 2px 12px 0 #000;
      text-align: left;
      overflow: hidden;
      backface-visibility: hidden;
      &__header{
        position: relative;
        padding: 15px 15px 10px;
      }
      &__title{
        padding-left: 0;
        margin-bottom: 0;
        font-size: 18px;
        line-height: 1;
        color: #303133
      }
      &__headerbtn{
        position: absolute;
        top: 15px;
        right: 15px;
        padding: 0;
        color: #999;
        background: transparent;
        font-size: 16px;
        cursor: pointer;
      }
      &__content{
        padding: 10px 15px;
        color: #606266;
        font-size: 14px;
      }
      &__btns{
        padding: 5px 15px 0;
        text-align: right;
      }
    }
  }
}
</style>